<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 文本组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    body {
      margin: 0;
      padding: calc(24 * var(--unit));
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--color-background-secondary);
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      display: flex;
      flex-wrap: wrap;
      background-color: var(--color-comp-background-primary);
      padding: calc(40 * var(--unit)) calc(24 * var(--unit));
      text-align: center;
      margin-bottom: calc(32 * var(--unit));
      border-radius: calc(12 * var(--unit));
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .example-section {
      background-color: var(--color-comp-background-primary);
      padding: calc(32 * var(--unit));
      margin-bottom: calc(32 * var(--unit));
      border-radius: calc(12 * var(--unit));
      box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(0, 0, 0, 0.1);
    }
    
    .example-section-title {
      font-size: var(--font-size-title-medium);
      font-weight: var(--font-weight-title);
      margin-bottom: calc(20 * var(--unit));
      color: var(--color-font-primary);
      border-bottom: 2px solid var(--color-brand);
      padding-bottom: calc(12 * var(--unit));
    }
    
    .example-row {
      display: flex;
      flex-wrap: wrap;
      gap: calc(16 * var(--unit));
      margin-bottom: calc(16 * var(--unit));
      align-items: center;
    }
    
    .example-item {
      flex: 1;
      min-width: calc(200 * var(--unit));
      padding: calc(16 * var(--unit));
      background-color: var(--color-comp-background-secondary);
      border-radius: calc(8 * var(--unit));
      text-align: center;
      transition: all var(--tab-transition-duration) ease;
    }
    
    .example-item:hover {
      background-color: var(--color-interactive-hover);
      transform: translateY(calc(-2 * var(--unit)));
    }
    
    .example-label {
      font-size: var(--font-size-caption-medium);
      color: var(--color-font-tertiary);
      margin-top: calc(8 * var(--unit));
    }
    
    .text-demo-container {
      padding: calc(16 * var(--unit));
      background-color: var(--color-comp-background-secondary);
      border-radius: calc(8 * var(--unit));
      margin-bottom: calc(16 * var(--unit));
    }
    
    .demo-title {
      font-weight: var(--font-weight-medium);
      margin-bottom: calc(8 * var(--unit));
      color: var(--color-font-secondary);
    }
    
    .text-demo-wrapper {
      max-width: calc(300 * var(--unit));
    }
    
    /* 响应式调整 */
    @media (max-width: 600px) {
      .container {
        padding: calc(12 * var(--unit));
      }
      
      .example-section {
        padding: calc(20 * var(--unit));
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1 class="title title-large">HarmonyOS 文本组件示例</h1>
      <p class="text text-secondary">本示例展示了 HarmonyOS 设计指南中定义的文本组件的各种样式和变体</p>
    </div>
    
    <!-- 文本颜色变体 -->
    <div class="example-section">
      <h2 class="example-section-title">文本颜色变体</h2>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-primary">主要文本</div>
          <div class="example-label">text-primary</div>
        </div>
        <div class="example-item">
          <div class="text text-secondary">次要文本</div>
          <div class="example-label">text-secondary</div>
        </div>
        <div class="example-item">
          <div class="text text-tertiary">第三级文本</div>
          <div class="example-label">text-tertiary</div>
        </div>
        <div class="example-item">
          <div class="text text-fourth">第四级文本</div>
          <div class="example-label">text-fourth</div>
        </div>
        <div class="example-item">
          <div class="text text-emphasize">强调文本</div>
          <div class="example-label">text-emphasize</div>
        </div>
      </div>
    </div>
    
    <!-- 文本在不同背景上的颜色 -->
    <div class="example-section">
      <h2 class="example-section-title">文本在不同背景上的颜色</h2>
      <div class="text-demo-container bg-brand">
        <div class="demo-title text-on">在强调色背景上</div>
        <div class="text text-on">在强调色背景上的文本</div>
      </div>
      <div class="text-demo-container bg-secondary">
        <div class="demo-title">在次要背景上</div>
        <div class="text text-on-secondary">在次要背景上的文本</div>
      </div>
      <div class="text-demo-container bg-tertiary">
        <div class="demo-title">在第三级背景上</div>
        <div class="text text-on-tertiary">在第三级背景上的文本</div>
      </div>
    </div>
    
    <!-- 文本大小变体 -->
    <div class="example-section">
      <h2 class="example-section-title">文本大小变体</h2>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-display-large">显示大文本</div>
          <div class="example-label">text-display-large</div>
        </div>
        <div class="example-item">
          <div class="text text-display-medium">显示中文本</div>
          <div class="example-label">text-display-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-display-small">显示小文本</div>
          <div class="example-label">text-display-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-title-large">标题大文本</div>
          <div class="example-label">text-title-large</div>
        </div>
        <div class="example-item">
          <div class="text text-title-medium">标题中文本</div>
          <div class="example-label">text-title-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-title-small">标题小文本</div>
          <div class="example-label">text-title-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-sub-title-large">副标题大文本</div>
          <div class="example-label">text-sub-title-large</div>
        </div>
        <div class="example-item">
          <div class="text text-sub-title-medium">副标题中文本</div>
          <div class="example-label">text-sub-title-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-sub-title-small">副标题小文本</div>
          <div class="example-label">text-sub-title-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-body-large">正文大文本</div>
          <div class="example-label">text-body-large</div>
        </div>
        <div class="example-item">
          <div class="text text-body-medium">正文中文本</div>
          <div class="example-label">text-body-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-body-small">正文小文本</div>
          <div class="example-label">text-body-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-caption-large">说明大文本</div>
          <div class="example-label">text-caption-large</div>
        </div>
        <div class="example-item">
          <div class="text text-caption-medium">说明中文本</div>
          <div class="example-label">text-caption-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-caption-small">说明小文本</div>
          <div class="example-label">text-caption-small</div>
        </div>
      </div>
    </div>
    
    <!-- 文本样式变体 -->
    <div class="example-section">
      <h2 class="example-section-title">文本样式变体</h2>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-bold">粗体文本</div>
          <div class="example-label">text-bold</div>
        </div>
        <div class="example-item">
          <div class="text text-light">细体文本</div>
          <div class="example-label">text-light</div>
        </div>
        <div class="example-item">
          <div class="text text-medium">中等粗细文本</div>
          <div class="example-label">text-medium</div>
        </div>
        <div class="example-item">
          <div class="text text-italic">斜体文本</div>
          <div class="example-label">text-italic</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-underline">下划线文本</div>
          <div class="example-label">text-underline</div>
        </div>
        <div class="example-item">
          <div class="text text-overline">上划线文本</div>
          <div class="example-label">text-overline</div>
        </div>
        <div class="example-item">
          <div class="text text-line-through">删除线文本</div>
          <div class="example-label">text-line-through</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="text text-lowercase">UPPERCASE TO lowercase</div>
          <div class="example-label">text-lowercase</div>
        </div>
        <div class="example-item">
          <div class="text text-uppercase">lowercase to UPPERCASE</div>
          <div class="example-label">text-uppercase</div>
        </div>
        <div class="example-item">
          <div class="text text-capitalize">capitalize each word</div>
          <div class="example-label">text-capitalize</div>
        </div>
      </div>
    </div>
    
    <!-- 文本对齐方式 -->
    <div class="example-section">
      <h2 class="example-section-title">文本对齐方式</h2>
      <div class="text-demo-container">
        <div class="demo-title">左对齐</div>
        <div class="text text-left">这是一段左对齐的文本内容。左对齐是最常用的文本对齐方式，适合大多数阅读场景。</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">居中对齐</div>
        <div class="text text-center">这是一段居中对齐的文本内容。居中对齐常用于标题或需要突出显示的内容。</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">右对齐</div>
        <div class="text text-right">这是一段右对齐的文本内容。右对齐常用于日期、数字或需要特殊排版的场景。</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">两端对齐</div>
        <div class="text text-justify">这是一段两端对齐的文本内容。两端对齐使文本在左右两侧都对齐，常用于正式文档或需要整齐外观的场景。两端对齐可以使文本块看起来更加整洁和专业。</div>
      </div>
    </div>
    
    <!-- 文本溢出处理 -->
    <div class="example-section">
      <h2 class="example-section-title">文本溢出处理</h2>
      <div class="text-demo-container text-demo-wrapper">
        <div class="demo-title">单行文本溢出 (ellipsis)</div>
        <div class="text text-ellipsis">这是一段很长的文本内容，当空间不足时，它将被截断并显示省略号。这是一种常见的处理长文本的方式。</div>
      </div>
      <div class="text-demo-container text-demo-wrapper">
        <div class="demo-title">多行文本溢出 (ellipsis-2)</div>
        <div class="text text-ellipsis-2">这是一段很长的文本内容，当空间不足时，它将在两行后被截断并显示省略号。这种方式适用于需要显示部分内容但又不想占用太多空间的场景。</div>
      </div>
      <div class="text-demo-container text-demo-wrapper">
        <div class="demo-title">多行文本溢出 (ellipsis-3)</div>
        <div class="text text-ellipsis-3">这是一段很长的文本内容，当空间不足时，它将在三行后被截断并显示省略号。这种方式适用于需要显示更多内容但又不想占用太多空间的场景。这是一段额外的文本，用于测试三行截断的效果。</div>
      </div>
    </div>
    
    <!-- 行高和字符间距 -->
    <div class="example-section">
      <h2 class="example-section-title">行高和字符间距</h2>
      <div class="text-demo-container">
        <div class="demo-title">行高变体</div>
        <div class="text text-line-height-1 mb-small">这是行高为1的文本内容。This is text with line-height 1.</div>
        <div class="text text-line-height-1_2 mb-small">这是行高为1.2的文本内容。This is text with line-height 1.2.</div>
        <div class="text text-line-height-1_4 mb-small">这是行高为1.4的文本内容。This is text with line-height 1.4.</div>
        <div class="text text-line-height-1_6 mb-small">这是行高为1.6的文本内容。This is text with line-height 1.6.</div>
        <div class="text text-line-height-1_8">这是行高为1.8的文本内容。This is text with line-height 1.8.</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">字符间距变体</div>
        <div class="text mb-small">正常字符间距。Normal letter spacing.</div>
        <div class="text text-letter-spacing-sm mb-small">小字符间距。Small letter spacing.</div>
        <div class="text text-letter-spacing-md mb-small">中等字符间距。Medium letter spacing.</div>
        <div class="text text-letter-spacing-lg">大字符间距。Large letter spacing.</div>
      </div>
    </div>
    
    <!-- 标题组件 -->
    <div class="example-section">
      <h2 class="example-section-title">标题组件</h2>
      <div class="example-row">
        <div class="example-item">
          <div class="title title-large">大标题</div>
          <div class="example-label">title title-large</div>
        </div>
        <div class="example-item">
          <div class="title title-medium">中标题</div>
          <div class="example-label">title title-medium</div>
        </div>
        <div class="example-item">
          <div class="title title-small">小标题</div>
          <div class="example-label">title title-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="title-sub title-sub-large">大副标题</div>
          <div class="example-label">title-sub title-sub-large</div>
        </div>
        <div class="example-item">
          <div class="title-sub title-sub-medium">中副标题</div>
          <div class="example-label">title-sub title-sub-medium</div>
        </div>
        <div class="example-item">
          <div class="title-sub title-sub-small">小副标题</div>
          <div class="example-label">title-sub title-sub-small</div>
        </div>
      </div>
      <div class="example-row">
        <div class="example-item">
          <div class="title title-emphasize">强调标题</div>
          <div class="example-label">title title-emphasize</div>
        </div>
        <div class="example-item">
          <div class="title title-bold">粗体标题</div>
          <div class="example-label">title title-bold</div>
        </div>
        <div class="example-item">
          <div class="title title-italic">斜体标题</div>
          <div class="example-label">title title-italic</div>
        </div>
      </div>
    </div>
    
    <!-- 可复制和不可选择文本 -->
    <div class="example-section">
      <h2 class="example-section-title">文本交互性</h2>
      <div class="text-demo-container">
        <div class="demo-title">可复制文本</div>
        <div class="text text-copyable">这是一段可复制的文本。请尝试选中并复制这段内容。This is copyable text. Try to select and copy this content.</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">不可选择文本</div>
        <div class="text text-unselectable">这是一段不可选择的文本。您无法选中或复制这段内容。This is unselectable text. You cannot select or copy this content.</div>
      </div>
    </div>
    
    <!-- 文本实用工具类 -->
    <div class="example-section">
      <h2 class="example-section-title">文本实用工具类</h2>
      <div class="text-demo-container">
        <div class="demo-title">文本截断 (truncate)</div>
        <div class="text text-truncate text-demo-wrapper">这是一段很长的文本内容，使用 truncate 类进行单行截断</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">文本换行 (break)</div>
        <div class="text text-break text-demo-wrapper">这是一段包含很长单词的文本内容：Supercalifragilisticexpialidocious 应该会自动换行</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">文本不换行 (nowrap)</div>
        <div class="text text-nowrap text-demo-wrapper">这是一段不会换行的文本内容，无论多长都会在一行内显示</div>
      </div>
      <div class="text-demo-container">
        <div class="demo-title">预格式化文本 (pre)</div>
        <pre class="text text-pre">这是预格式化的文本
保留了所有的空格和换行
    可以用于代码展示</pre>
      </div>
    </div>
  </div>
</body>
</html>